<template>
	<view id="page-print" class="page-print">
		<custom-nav :showBackArrow="true" title="打印预览">
			<template v-slot:navRight>
				<text class="print-text-btn" @tap="print">打印</text>
			</template>
		</custom-nav>
		<view id="targetDom" class="page-print-main" :style="pagePaddingTop">
			<view class="page-print-list">
				<view class="page-print-item" v-for="(item,index) in list">
					<view class="question">Q: {{item.question}}</view>
					<view class="answer">A: {{item.answer}}</view>
				</view>
			</view>
		</view>
		<!-- <view :prop="url" :change:prop="pdfPreview.receiveMsg" id="pdfPreview" class="pdfPreview"></view> -->

		<iframe id="previewIframe" height="100%" :src="url"></iframe>
	</view>
</template>

<script>
	import CustomNav from "@/components/custom-nav/index.vue";
	import {
		showBRContent,
		showDecodeBase64,
	} from "@/utils/tool.js"

	let navHeightInfo = getNavHeightTop();
	import {
		getNavHeightTop
	} from "@/stores/navStore.js";
	import {
		uploadAPI
	} from "../../http/uploadFile2.js";

	// 引入插件
	// const viewerUrl = '/static/pdfjs/web/viewer.html'; //用来渲染PDF的html

	// const testFileUrl = 'https://115292928app8001.downline.cn/pdfjs/pdfjs/web/compressed.tracemonkey-pldi-09.pdf'; //pdfjs自带的默认PDF
	const viewerUrl = 'https://115292928app8001.downline.cn/pdfjs/pdfjs/web/viewer.html'; //用来渲染PDF的html
	let pagePaddingTop = {
		paddingTop: navHeightInfo.navTotalHeight + "px",
	};
	// #ifdef APP-PLUS
	pagePaddingTop = {
		paddingTop: navHeightInfo.statusBarHeight + "px",
	};
	// #endif

	export default {
		components: {
			CustomNav
		},
		data() {
			return {
				list: [],
				pagePaddingTop,
				url: '',
			}
		},
		onLoad(params) {
			if (params) {
				let printList = JSON.parse(params.printList);
				console.log("printList", printList);
				this.list = printList.map(item => {
					return {
						question: showBRContent(showDecodeBase64(item.mid_table_remark_001)),
						answer: showBRContent(showDecodeBase64(item.mid_table_remark_002)),
					}
				})
			}
		},
		methods: {
			// 接收renderjs发回的数据
			async uploadPDF(data) {
				console.log('receiveRenderData-->', data);
				// 上传PDF，获得上传后的url
				let pdfOnlineUrl = await uploadAPI(data.pdfFilePath);
				// 触发逻辑层出入renderjs数据改变
				this.url = viewerUrl + '?file=' + encodeURIComponent(pdfOnlineUrl);
				console.log('this.url', this.url)
			},
		
			print() {

			},


		}

	}
</script>

<script module="pdfPreview" lang="renderjs">
	import createPdf from '../../utils/pdf.js';

	export default {
		async mounted() {
			//  生成PDF文件
			const pdfFilePath = await this.generatePDF();
			this.postMessage({
				pdfFilePath
			})
		},
		methods: {
			generatePDF() {
				let target = document.querySelector('#targetDom'); //ID获取节点对象
				return createPdf(target, 'pdfName');
			},
			// 发送数据到逻辑层
			postMessage(data) {
				this.$ownerInstance.callMethod('uploadPDF', data)
			},
			
			// receiveMsg(){
			// 	if(!this.url) return;
			// 	console.log('recieveMessage', this.url)
			// 	const url = this.url;
			// 	let iframe = document.createElement('iframe');
			// 		iframe.setAttribute('height', '100%');
			// 		iframe.src = url
			// 	let container = document.getElementById('page-print');
			// 	container.appendChild(iframe);
			// },

		},
	}
</script>

<style lang="less">
	.page-print {
		padding-top: 88rpx;
		position: relative;
		overflow: auto;
		width: 100%;
		height: 100vh;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		background-color: #182836;
		box-sizing: border-box;

		.print-text-btn {
			color: #00FFF6;
			font-size: 24rpx;
		}

		.page-print-main {
			position: fixed;
			top: 200vh;
		}

		.page-print-list {
			width: 686rpx;
			// height: 1174rpx;
			background: #2D4052;
			border-radius: 32rpx;
			padding: 56rpx 40rpx;
			margin: 32rpx;
			box-sizing: border-box;

			.page-print-item {
				word-break: break-all;
				line-height: 48rpx;
				color: #FFFFFF;

				&:not(:last-child) {
					margin-bottom: 58rpx;
				}

				.question {
					margin-bottom: 30rpx;
					font-size: 32rpx;
					font-weight: 600;
				}

				.answer {
					font-size: 28rpx;
				}
			}
		}

		.page-tool {
			display: flex;
			position: absolute;
			top: 5px;
			left: 50%;
			z-index: 100;
			transform: translateX(-50%);
			align-items: center;
			background: rgb(66 66 66);
			color: white;
			border-radius: 19px;
			cursor: pointer;
			justify-content: center;
			font-size: 15px;
		}

		.page-tool-item {
			padding: 4px 10px;
			cursor: pointer;
		}

	}
</style>